<template>
  <div class="rowClass">
    <div>
      <CSelect
        label="区域范围"
        class="processFileterDiv"
        horizontal
        :options="regionClassifyOption"
        :value.sync="regionOptionValue"
        @change="regionClassifycChangeEvent(regionOptionValue)"
        style="margin-left: 10px"
      />
    </div>
    <div>
      <Cascader
        v-show="isRegionShow"
        :title="regionTitle"
        :data="regionCascader"
        change-on-select
        filterable
        clearable
        class="regionCas"
        :load-data="loadRegionData"
        @on-change="regionChangeEvent"
      ></Cascader>
      <div v-show="!isRegionShow" class="inputShpFile">
        <CInput
          v-model="shpFileItem['default']"
          clearable
          autocomplete="off"
          class="inputTd"
          :title="shpFileItem.default"
          :placeholder="`${shpFileItem.desc}`"
        />
        <CButton
          color="info"
          size="sm"
          @click="browserFile(shpFileItem)"
          class="btnBrowser system-btn-style"
          >...</CButton
        >
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "regionSelectionComponent",
  data() {
    return {
      shpFileItem: {
        default: "",
        constraint: {
          extensions: "*.shp",
        },
        label: "shp路径",
        desc: "shp路径",
        type: { name: "file", plural: false },
      },

      isRegionShow: true,
      region: {
        name: "",
        geometry: "",
      },
      regionTitle: "",
      regionCascader: [],
      regionOptionValue: "0",
      regionClassifyOption: [
        // 数据类型(-1全国 ；0是省,1是市,2是县,3是重要保护地,4是重点区域,5是重点流域)
        // 1是重要保护地,2是重点区域,3是重点流域 queryRegionClassifyType接口
        { label: "行政区划", value: 0 },
        { label: "重点保护区", value: 1 },
        { label: "重点区域", value: 2 },
        { label: "重点流域", value: 3 },
        { label: "自定义区域", value: 100 },
      ],
    };
  },
  components: {},
  watch: {
    shpFileItem: {
      handler(newValue, oldValue) {
        if (newValue.default != oldValue) {
          this.getCustomShpRegion(newValue.default);
        }
      },
      deep: true,
    },
  },
  created() {},
  mounted() {
    this.searchprovince(-1); //全国
    this.searchprovince(0); //省
  },
  methods: {
    getCustomShpRegion(shpPath) {
      //需求等待确认，自定义返回的数据和行政区域返回的参数不一致
      return;
      let path = this.$api.processingApi.readShp;
      let params = {
        path: shpPath,
        withGeo: true, //是否返回面数据
      };
      this.http.get(path, params).then((res) => {
        if (res.data.code == 0) {
          // _this.region = res.data.data;
          // _this.$emit("regionValue", _this.region);
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    //左侧区域大类分类变化    一级变化事件
    regionClassifycChangeEvent(value) {
      if (value == 0) {
        this.isRegionShow = true;
        this.searchprovince(value);
      } else if (value == 100) {
        this.isRegionShow = false;
      } else {
        this.isRegionShow = true;
        this.searchrRegionClassifyByType(value);
      }
    },
    //右侧具体区域改变事件
    regionChangeEvent(value, selectedData) {
      if (selectedData.length < 1) return;
      let item = selectedData[selectedData.length - 1];
      this.regionTitle = value.join("/");
      if (item.tag === "other") {
        this.region["name"] = item.label;
        this.region["geometry"] = item.geometry;
        this.region["code"] = item.code;

        _this.$emit("regionValue", _this.region);
      } else this.searchGeometryByCode(item);
    },
    //根据code查询当前区域的范围
    searchGeometryByCode(item) {
      let _this = this;
      let path = this.$api.processingApi.queryFeatureBase64;
      // let type = item.tagValue ? item.tagValue : 0;
      // if (item.tag === "city") type = 1;
      // else if (item.tag === "region") type = 2;
      let param = {
        collectionName: "area_info",
        outputEpsg: 4326,
        orderColName: "code",
        queryConditionList: [
          // {
          //   compareOp: "=",
          //   fieldName: "type",
          //   fieldValue: type,
          //   relationNextOne: "AND",
          // },
          {
            compareOp: "=",
            fieldName: "code",
            fieldValue: item.code,
          },
        ],
        queryResultList: [],
      };
      let strJson = JSON.stringify(param);
      let sendData =  this.$Base64.encode(strJson);
      _this.http.postText(path, sendData).then((res) => {
        let data = res.data.data.data;
        if (res.data.code == 0) {
          if (data.length < 1) {
            _this.$Message.info("【" + item.label + "】" + "的范围未查到");
            return;
          }
          _this.region["name"] = item.label;
          _this.region["geometry"] = data[0].geometry;
          _this.region["code"] = item.code;
          _this.$emit("regionValue", _this.region);
        } else {
          _this.$Message.error(res.data.message);
        }
      });
    },
    //动态异步加载数据
    loadRegionData(item, callback) {
      let _this = this;
      item.loading = true;
      setTimeout(() => {
        if (item.tag === "province") {
          _this.searchCityOrRegion(item, callback, "city");
        } else if (item.tag === "city") {
          _this.searchCityOrRegion(item, callback, "region");
        } else if (item.tag === "importantRegion") {
          _this.searchImportantRegionByFilter(item, callback);
        }
        item.loading = false;
        callback();
      }, 500);
    },
    //获取3个重要区域对应的第一类别数据
    searchrRegionClassifyByType(type) {
      //1:重点保护区  2:重点区域 3:重点流域
      let _this = this;
      let path = this.$api.processingApi.queryRegionClassifyType;
      let param = {
        type: type,
      };
      _this.http.get(path, param).then((res) => {
        if (res.data.code === 0 && res.data.success) {
          let data = res.data.data;
          _this.regionCascader = [];
          for (let i = 0; i < data.length; i++) {
            if (data[i].haveChildren == "1") {
              data[i].children = [];
              data[i].loading = false;
            }
            data[i].code = data[i].value;
            data[i].tag = "importantRegion";
            _this.regionCascader.push(data[i]);
          }
        } else {
          _this.$Message.error(res.data.message);
        }
      });
    },
    //查全国和省的数据
    searchprovince(type) {
      let self = this;
      self.regionCascader = [];
      let path = this.$api.processingApi.queryFeatureBase64;

      let typeValue = type ? type : 0; //0 province ;-1 全国
      let param = {
        collectionName: "area_info",
        orderColName: "code",
        outputEpsg: 4326,
        queryConditionList: [
          {
            compareOp: "=",
            fieldName: "type",
            fieldValue: typeValue,
          },
        ],
        queryResultList: ["name", "code"],
      };
      let strJson = JSON.stringify(param);
      let sendData =  this.$Base64.encode(strJson);
      self.http.postText(path, sendData).then((res) => {
        if (res.data.code == 0) {
          let province = res.data.data.data;
          for (let i = 0; i < province.length; i++) {
            let tempdata = {
              code: province[i].properties.code,
              label: province[i].properties.name,
              value: province[i].properties.name, //可以不写 但是字体会变颜色
              children: [],
              loading: false,
              tag: typeValue === 0 ? "province" : "china",
              tagValue: typeValue,
            };
            if (tempdata.tag != "province") {
              //没有子级 去掉右侧的展开箭头
              delete tempdata.children;
              delete tempdata.loading;
            }
            self.regionCascader.push(tempdata);
          }
        }
      });
    },
    //查市和县的数据
    searchCityOrRegion(item, callback, tag) {
      let _this = this;
      let path = this.$api.processingApi.queryFeatureBase64;
      // let typeValue;
      // if (tag === "city") {
      //   typeValue = 1;
      // } else if (tag === "region") {
      //   typeValue = 2;
      // } else {
      //   return;
      // }
      let param = {
        collectionName: "area_info",
        orderColName: "code",
        outputEpsg: 4326,
        queryConditionList: [
          // {
          //   compareOp: "=",
          //   fieldName: "type",
          //   fieldValue: typeValue,
          //   relationNextOne: "AND",
          // },
          {
            compareOp: "=",
            fieldName: "parent_code",
            fieldValue: item.code,
          },
        ],
        queryResultList: ["name", "code"],
      };
      let strJson = JSON.stringify(param);
      let sendData =  this.$Base64.encode(strJson);
      _this.http.postText(path, sendData).then((res) => {
        let data = res.data.data.data;
        for (let j = 0; j < data.length; j++) {
          let tempdata = {
            value: data[j].properties.name,
            code: data[j].properties.code,
            label: data[j].properties.name,
            children: [],
            loading: false,
            tag: tag,
            // tagValue: typeValue,
          };
          if (tag === "region") {
            delete tempdata.children;
            delete tempdata.loading;
          }
          item.children.push(tempdata);
        }
        item.loading = false;
        callback();
      });
    },
    //查询重要区域的子级数据
    searchImportantRegionByFilter(item, callback) {
      let _this = this;
      let path = this.$api.processingApi.queryFeatureBase64;
      let param = {
        collectionName: "area_info",
        orderColName: "code",
        outputEpsg: 4326,
        queryConditionList: JSON.parse(item.filter),
        queryResultList: ["name", "code"],
      };
      let strJson = JSON.stringify(param);
      let sendData =  this.$Base64.encode(strJson);
      _this.http.postText(path, sendData).then((res) => {
        let data = res.data.data.data;
        for (let j = 0; j < data.length; j++) {
          let tempdata = {
            value: data[j].properties.name,
            code: data[j].properties.code,
            label: data[j].properties.name,
          };
          item.children.push(tempdata);
        }
        item.loading = false;
        callback();
      });
    },

    browserFile(item) {
      this.$emit("fileSelectModal", item); //common.vue 组件中的browserFile
    },
  },
};
</script>
<style  lang='scss' scoped>
.rowClass {
  display: flex;
  width: 100%;
}
.processFileterDiv {
  width: 390px;
  text-align: left;
}
.regionCas {
  width: 212px;
  float: right;
  margin-left: 58px;
}
.inputTd {
  margin-left: 31px;
}
.btnBrowser {
  float: right;
  height: 26px;
  margin-left: 10px;
  margin-top: 4px;
}
.inputShpFile {
  display: flex;
}
</style>
